@extends('extend.home')
@section('title','前台用户注册')
@section('content')
	<div class="register">
	   @if (count($errors) > 0)
        <div class="form-group error">
            <div class="col-sm-6 col-md-offset-3">
            	@foreach ($errors->all() as $error)
				<div class="alert alert-danger alert-dismissable text-center">
            	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            	<strong><span class="glyphicon glyphicon-ok"></span></strong>&nbsp;&nbsp;&nbsp;<span>{{ $error }}</span></div>
            	@endforeach
            </div>
        </div>
        @endif
		<div class="container">
		<br><br><br>
        <form class="form-horizontal" action="/register" method="post" enctype="multipart/form-data">
              <div class="form-group">
                <label for="inputEmail3" name="username" class="col-sm-1 control-label">用户名</label>
                <div class="col-sm-3">
                  <input name="username" type="text" class="form-control" id="inputuser" placeholder="请输入8~18位用户名">
                </div><label for="inputPassword3" class="col-sm-1 control-label tishi"></label>
              </div>
              <div class="form-group">
                <label for="inputPassword3" name="password" class="col-sm-1 control-label">密码</label>
                <div class="col-sm-3">
                  <input name="password" type="password" class="form-control" id="inputpasswd" placeholder="请输入6~16位密码">
                </div><label for="inputPassword3" class="col-sm-1 control-label tishi"></label>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-1 control-label">手机号</label>
                <div class="col-sm-3">
                  <input name="phone" type="text" class="form-control" id="inputphone" placeholder="请输入11位手机号">
                </div><label for="inputPassword3" class="col-sm-1 control-label tishi"></label>
              </div>
              <div class="form-group">
                <label for="inputPassword3" class="col-sm-1 control-label">验证码</label>
                <div class="col-sm-3">
                  <input name="code" type="text" class="form-control" id="inputcode" placeholder="请输入6位手机验证码">
                </div><label for="inputPassword3" class="col-sm-1 control-label tishi"></label>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-1 col-sm-10">
                    {{csrf_field()}}
                  <button type="submit" id="submit" class="btn btn-default">提交</button>
                </div>
              </div>
        </form>
        <!-- has-success绿色(合法)  has-error红色(非法)  has-warning褐色(已发送) -->
        <script type="text/javascript">
            //初始化
            var message1=false;
            var message2=false;
            var message3=false;
            var message4=false;
            var time=60;
            var timestart=false;
            var session='';
        //-------------------------------------------------------------------
            //用户名检测
            $('input[name=username]').focus(function(){//获得焦点设置样式
                var parent=$(this).parents().find('.form-group').eq(0);//获取父级元素
                parent.removeClass('has-error');//获得焦点时用户名的样式
                $('.tishi').eq(0).html('');//修改获得焦点时提示x或者√
            }).blur(function(){//失去焦点后检测用户名
                var username=$(this).val();//获取用户输入内容,检测是否合法
                var reg=/^\w{8,18}$/;    //验证用户名正则
                var parent=$(this).parents().find('.form-group').eq(0);//获取父级元素
                if(!reg.test(username)){
                    $('.tishi').eq(0).html('✘');
                    parent.addClass('has-error');
                    message1=false;
                }else{
                    //获得用户的输入,ajax请求服务器,查看用户名是否存在
                    $.ajax({
                        url:'/homeuser/aju',
                        data:{user:username},
                        dataType:'json',
                        type:'GET',
                        success:function(data){
                        
                            if(data=='1'){
                                $('.tishi').eq(0).html('✔');
                                parent.addClass('has-success');
                                message1=true;
                            }else{
                                $('.tishi').eq(0).html('✘ 用户名已被注册');
                                parent.addClass('has-error');
                                message1=false;
                            }
                        },
                        error:function(){
                            alert('请求失败,刷新重试,或者求助管理员');
                        },
                        async:false
                    });
                }
            });
        //-------------------------------------------------------------------
            //密码检测
            $('input[name=password]').focus(function(){//获得焦点设置样式
                var parent=$(this).parents().find('.form-group').eq(1);//获取父级元素
                parent.removeClass('has-error');//获得焦点时密码的样式
                $('.tishi').eq(1).html('');//修改获得焦点时提示x或者√
            }).blur(function(){//失去焦点后检测密码
                var username=$(this).val();//获取用户输入内容,检测是否合法
                var reg=/^\w{6,16}$/;    //验证密码正则
                var parent=$(this).parents().find('.form-group').eq(1);//获取父级元素
                if(!reg.test(username)){
                    $('.tishi').eq(1).html('✘');
                    parent.addClass('has-error');
                    message2=false;
                }else{
                    $('.tishi').eq(1).html('✔');
                    parent.addClass('has-success');
                    message2=true;
                }
            });
        //-------------------------------------------------------------------
            //手机号检测
            $('input[name=phone]').focus(function(){//获得焦点设置样式
                var parent=$(this).parents().find('.form-group').eq(2);//获取父级元素
                parent.removeClass('has-error');//获得焦点时密码的样式
                $('.tishi').eq(2).html('');//修改获得焦点时提示x或者√
            }).blur(function(){//失去焦点后检测手机号
                var userphone=$(this).val();//获取用户输入内容,检测是否合法
                var reg=/^\d{11}$/;    //验证手机号正则
                var parent=$(this).parents().find('.form-group').eq(2);//获取父级元素
                if(!reg.test(userphone)){
                    $('.tishi').eq(2).html('✘ 手机号错误,请重新输入');
                    parent.addClass('has-error');
                    message3=false;
                }else{
                    if(timestart==false){
                        //获得用户的输入,ajax请求服务器,发送短信.
                        $.ajax({
                            url:'/sms/code.php',
                            data:{uphone:userphone},
                            dataType:'json',
                            type:'GET',
                            success:function(data){
                                if(data !=0){
                                    timerun();//开启定时器,倒计时
                                    session=data;
                                    parent.addClass('has-success');
                                    message3=true;

                                }else{
                                    $('.tishi').eq(2).html('✘ 短信发送失败,请核对手机号后重试');
                                    parent.addClass('has-error');
                                    message3=false;
                                }
                            },
                            error:function(){
                                alert('短信发送错误,错误代码1600');
                            },
                            async:false
                        });
                    }else{
                        alert('验证码发送了哦,请耐心等待');
                        return;
                    }
                }
            });
        //-------------------------------------------------------------------
            //验证码检测
            $('input[name=code]').focus(function(){//获得焦点设置样式
                var parent=$(this).parents().find('.form-group').eq(3);//获取父级元素
                parent.removeClass('has-error');//获得焦点时密码的样式
                $('.tishi').eq(3).html('');//修改获得焦点时提示x或者√
            }).blur(function(){//失去焦点后检测手机号
                var codes=$(this).val();//获取用户输入内容,检测是否合法
                var reg=/^\d{6}$/;    //验证手机号正则
                var parent=$(this).parents().find('.form-group').eq(3);//获取父级元素
                if(!reg.test(codes)){
                    $('.tishi').eq(3).html('✘ 验证码格式错误');
                    parent.addClass('has-error');
                    message4=false;
                }else{
                    //获得用户的输入,ajax请求服务器,发送验证码.
                    alert(session);
                    if(session==codes){
                        $('.tishi').eq(3).html('✔');
                        parent.addClass('has-success');
                        message4=true;

                    }else{
                        $('.tishi').eq(3).html('✘ 验证码错误');
                        parent.addClass('has-error');
                        message4=false; 
                    }
                }
            });

        //------------------------------判断-----------------------------------
        $('#submit').click(function(){
            if(message1&&message2&&message3&&message4){
                return true;
            }else{
                $('input').trigger('blur');
                return false;
            }
        })
        //--------------------------------倒计时----------------------------
            //倒计时
        function timerun(){
            clearInterval(a);
            var a=setInterval(function(){
                $('.tishi').eq(2).html('✔ '+time+'秒后重发');
                if(time>0){
                    time=time-1;
                }else{
                    if(time==0){
                        timestart=false;
                        $('.tishi').eq(2).html('重新获取');
                        clearInterval(a);
                        time=60;
                    }
                } 
            },1000);
        }
        //---------------------------------END----------------------------------
        
        </script>

		</div>
	   <div class="clearfix"> </div>
		</div>
@endsection